<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>美团闪购商家AI客服助手</title>
    <style>
        :root {
            --primary-color: #ffd100;
            --success-color: #4caf50;
            --danger-color: #f44336;
            --warning-color: #ff9800;
            --info-color: #2196f3;
            --text-color: #333;
            --bg-color: #f5f5f5;
            --border-color: #ddd;
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: var(--font-family);
            color: var(--text-color);
            background-color: var(--bg-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .config-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .config-item {
            margin-bottom: 20px;
        }

        h2, h3 {
            color: var(--text-color);
            margin-bottom: 15px;
        }

        .keyword-list, .default-replies {
            margin-bottom: 15px;
        }

        .keyword-item, .reply-item {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            align-items: flex-start;
        }

        input[type="text"], textarea {
            flex: 1;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-family: var(--font-family);
        }

        textarea {
            min-height: 60px;
            resize: vertical;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-family: var(--font-family);
            transition: background-color 0.3s;
        }

        button:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }

        .add-keyword-button, .add-default-reply-button {
            background-color: var(--primary-color);
            color: white;
        }

        .save-button {
            background-color: var(--success-color);
            color: white;
        }

        .reset-button {
            background-color: var(--danger-color);
            color: white;
        }

        .delete-button {
            background-color: var(--danger-color);
            color: white;
            padding: 4px 8px;
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        #startBrowser, #startMonitoring, #stopMonitoring {
            padding: 10px 20px;
            font-size: 16px;
        }

        #startBrowser {
            background-color: var(--primary-color);
        }

        #startMonitoring {
            background-color: var(--success-color);
        }

        #stopMonitoring {
            background-color: var(--danger-color);
        }

        .status {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 20px;
            text-align: center;
        }

        .status.connected {
            background-color: var(--success-color);
            color: white;
        }

        .status.disconnected {
            background-color: var(--danger-color);
            color: white;
        }

        .log-container {
            background: white;
            border-radius: 8px;
            padding: 15px;
            height: 300px;
            overflow-y: auto;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .log-entry {
            padding: 8px;
            margin-bottom: 5px;
            border-radius: 4px;
            font-family: monospace;
        }

        .log-entry.info {
            background-color: rgba(33, 150, 243, 0.1);
        }

        .log-entry.success {
            background-color: rgba(76, 175, 80, 0.1);
        }

        .log-entry.warning {
            background-color: rgba(255, 152, 0, 0.1);
        }

        .log-entry.error {
            background-color: rgba(244, 67, 54, 0.1);
        }

        .log-entry .time {
            color: #666;
            margin-right: 10px;
        }

        .log-entry .type {
            font-weight: bold;
            margin-right: 10px;
        }

        /* 自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 12px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 6px;
            border: 3px solid #f1f1f1;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Windows 特定的滚动条样式 */
        @supports (-ms-ime-align: auto) {
            ::-webkit-scrollbar {
                width: 14px;
            }
            
            ::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-left: 1px solid #e0e0e0;
            }
            
            ::-webkit-scrollbar-thumb {
                background: #888;
                border: 2px solid #f1f1f1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>美团闪购商家AI客服助手</h1>
        </header>

        <main>
            <section class="config-section">
                <h2>回复配置</h2>
                
                <div class="config-item">
                    <h3>关键词回复</h3>
                    <div id="keywordList" class="keyword-list">
                        <!-- 关键词列表将通过JavaScript动态生成 -->
                    </div>
                    <div class="config-buttons">
                        <button class="add-keyword-button" onclick="addKeyword()">添加关键词</button>
                    </div>
                </div>
                
                <div class="config-item">
                    <h3>默认回复</h3>
                    <div id="defaultReplies" class="default-replies">
                        <!-- 默认回复列表将通过JavaScript动态生成 -->
                    </div>
                    <div class="config-buttons">
                        <button class="add-default-reply-button" onclick="addDefaultReply()">添加默认回复</button>
                    </div>
                </div>
                
                <div class="config-buttons">
                    <button class="save-button" onclick="saveConfig()">保存配置</button>
                    <button class="reset-button" onclick="resetConfig()">重置配置</button>
                </div>
            </section>
            
            <section class="controls">
                <button id="startBrowser">启动浏览器</button>
                <button id="startMonitoring">开始监控</button>
                <button id="stopMonitoring">停止监控</button>
            </section>
            
            <div id="status" class="status disconnected">未连接</div>
            <div class="log-container" id="logContainer"></div>
        </main>
    </div>
    <script src="renderer.js"></script>
    <script>
        let replyConfig = {
            keywords: {},
            defaultReplies: []
        };
        
        // 获取初始配置
        ipcRenderer.send('get-reply-config');
        ipcRenderer.on('reply-config', (event, config) => {
            replyConfig = config;
            updateConfigUI();
        });
        
        // 更新配置UI
        function updateConfigUI() {
            // 更新关键词列表
            const keywordList = document.getElementById('keywordList');
            keywordList.innerHTML = '';
            
            Object.entries(replyConfig.keywords).forEach(([keyword, reply], index) => {
                const div = document.createElement('div');
                div.className = 'keyword-item';
                div.innerHTML = `
                    <input type="text" placeholder="关键词" value="${keyword}" onchange="updateKeyword(${index}, this.value, 'keyword')">
                    <textarea placeholder="回复内容" onchange="updateKeyword(${index}, this.value, 'reply')">${reply}</textarea>
                    <button class="delete-button" onclick="removeKeyword(${index})">删除</button>
                `;
                keywordList.appendChild(div);
            });
            
            // 更新默认回复列表
            const defaultReplies = document.getElementById('defaultReplies');
            defaultReplies.innerHTML = '';
            
            replyConfig.defaultReplies.forEach((reply, index) => {
                const div = document.createElement('div');
                div.className = 'reply-item';
                div.innerHTML = `
                    <textarea placeholder="默认回复" onchange="updateDefaultReply(${index}, this.value)">${reply}</textarea>
                    <button class="delete-button" onclick="removeDefaultReply(${index})">删除</button>
                `;
                defaultReplies.appendChild(div);
            });
        }
        
        // 添加关键词
        function addKeyword() {
            const keywordList = document.getElementById('keywordList');
            const div = document.createElement('div');
            div.className = 'keyword-item';
            div.innerHTML = `
                <input type="text" placeholder="关键词" onchange="updateKeyword(${keywordList.children.length}, this.value, 'keyword')">
                <textarea placeholder="回复内容" onchange="updateKeyword(${keywordList.children.length}, this.value, 'reply')"></textarea>
                <button class="delete-button" onclick="removeKeyword(${keywordList.children.length})">删除</button>
            `;
            keywordList.appendChild(div);
        }
        
        // 更新关键词
        function updateKeyword(index, value, type) {
            if (type === 'keyword') {
                const oldKeyword = Object.keys(replyConfig.keywords)[index];
                if (oldKeyword) {
                    const reply = replyConfig.keywords[oldKeyword];
                    delete replyConfig.keywords[oldKeyword];
                    replyConfig.keywords[value] = reply;
                } else {
                    replyConfig.keywords[value] = '';
                }
            } else {
                const keyword = Object.keys(replyConfig.keywords)[index];
                if (keyword) {
                    replyConfig.keywords[keyword] = value;
                }
            }
        }
        
        // 删除关键词
        function removeKeyword(index) {
            const keyword = Object.keys(replyConfig.keywords)[index];
            if (keyword) {
                delete replyConfig.keywords[keyword];
                updateConfigUI();
            }
        }
        
        // 添加默认回复
        function addDefaultReply() {
            const defaultReplies = document.getElementById('defaultReplies');
            const div = document.createElement('div');
            div.className = 'reply-item';
            div.innerHTML = `
                <textarea placeholder="默认回复" onchange="updateDefaultReply(${defaultReplies.children.length}, this.value)"></textarea>
                <button class="delete-button" onclick="removeDefaultReply(${defaultReplies.children.length})">删除</button>
            `;
            defaultReplies.appendChild(div);
        }
        
        // 更新默认回复
        function updateDefaultReply(index, value) {
            replyConfig.defaultReplies[index] = value;
        }
        
        // 删除默认回复
        function removeDefaultReply(index) {
            replyConfig.defaultReplies.splice(index, 1);
            updateConfigUI();
        }
        
        // 保存配置
        function saveConfig() {
            ipcRenderer.send('update-reply-config', replyConfig);
            addLog('配置已保存', 'success');
        }
        
        // 重置配置
        function resetConfig() {
            if (confirm('确定要重置配置吗？')) {
                ipcRenderer.send('get-reply-config');
                addLog('配置已重置', 'info');
            }
        }
    </script>
</body>
</html> 